import React from "react";
import {Divider} from "antd";
import {CardContainer} from "@/component/Home/CardList/style";
import {getNewReleasesGames, getPopularGames} from "@/api/JustGameInfo";
import Config from "@/config";
import GameCarousel from './GameCarousel';


class CardList extends React.Component {
    constructor(props) {
        super(props);
        this.loadMostPopularGames = this.loadMostPopularGames.bind(this);
        this.loadNewReleasesGames = this.loadNewReleasesGames.bind(this);
        this.loadBestEvaluationGames = this.loadBestEvaluationGames.bind(this);
        this.state = {
            // 热门推荐
            mostPopularGames: [],
            // 最新上架
            newReleasesGames: [],
            // 口碑最佳
            bestEvaluationGames: []
        }
    }


    componentDidMount() {
        /* 初始化数据 */
        this.loadMostPopularGames()
        this.loadNewReleasesGames()
        this.loadBestEvaluationGames()
    }

    //加载热门推荐
    loadMostPopularGames() {
        getPopularGames().then(res => {
            if (res.success) {
                this.setState({
                    mostPopularGames: res.data
                })
            }
        })
    }

    //加载最新上架
    loadNewReleasesGames() {
        getNewReleasesGames().then(res => {
            if (res.success) {
                this.setState({
                    newReleasesGames: res.data
                })
            }
        })
    }

    //加载口碑最佳
    loadBestEvaluationGames() {
        // getBestEvaluationGames().then( res => {
        //     if (res.success){
        //         this.setState({
        //             bestEvaluationGames:res.data
        //         })
        //     }
        // })
    }


    render() {
        return <CardContainer>
            {/*  热门推荐  */}
            {
                this.state.mostPopularGames.length > 0 ?
                    <>
                        <Divider orientation="left"
                                 className={'container'}
                                 style={{borderColor:'#e54a4a'}}
                                 plain>
                            <Config.IconFont type={'icon-redu'}
                                             style={{lineHeight: '20px', fontSize: '16px', color: '#e54a4a'}}/>
                            <span className={'text popular'}>热门推荐</span>
                        </Divider>
                        <GameCarousel data={this.state.mostPopularGames}/>
                    </> : null
            }

            {/*  最近更新  */}
            {
                this.state.newReleasesGames.length > 0 ?
                    <>
                        <Divider orientation="left"
                                 style={{borderColor:'#e3cc5b'}}
                                 className={'container'}
                                 plain>
                            <Config.IconFont type={'icon-zuixin1'} style={{lineHeight: '20px', fontSize: '16px',transform:"scale(1.3)",color:'#e3cc5b'}}/>
                            <span className={'text newReleases'}>近期上架</span>
                        </Divider>
                        <GameCarousel data={this.state.newReleasesGames}/>
                    </> : null
            }

            {/*  口碑最佳  */}
            {
                this.state.bestEvaluationGames.length > 0 ?
                    <>
                        <Divider orientation="left"
                                 className={'container'}
                                 plain>
                            <Config.IconFont type={'icon-zuixin'} style={{lineHeight: '20px', fontSize: '18px'}}/>
                            <span className={'text bestEvaluation'}>口碑最佳</span>
                        </Divider>
                        <GameCarousel data={this.state.bestEvaluationGames}/>
                    </> : null
            }


        </CardContainer>
    }
}

export default CardList;
